<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
  </head>
  <body>
    <canvas id="c"></canvas>
    <!-- vertex shader -->
    <script
      id="vertex-shader-2d"
      type="notjs"
    >
      attribute vec2 a_position;//像素坐标

      uniform vec2 u_resolution;// 分辨率变量

      void main() {
         // 将像素坐标转换为0.0-1.0
         vec2 zeroToOne = a_position.xy / u_resolution;

         // 将像素坐标转换为0.0-2.0
         vec2 zeroToTwo = zeroToOne * 2.0;

         // 将像素坐标转换为-1->1
         vec2 clipSpace = zeroToTwo - 1.0;

         // 将裁剪空间坐标赋值给 gl_Position，z 分量固定为 0，w 分量固定为 1
         //clipSpace 是一个 vec2 类型的变量，表示裁剪空间坐标。
         //vec2(1, -1) 是一个常量向量，用于对 clipSpace 的 x 和 y 分量进行缩放：
         //x 分量乘以 1：保持不变。y 分量乘以 -1：翻转 y 轴。
         gl_Position = vec4(clipSpace*vec2(1,-1), 0, 1);
      }
    </script>
    <!-- fragment shader -->
    <script
      id="fragment-shader-2d"
      type="notjs"
    >
      precision mediump float;

      void main() {
        gl_FragColor = vec4(1, 0, 0.5, 1); // return redish-purple
      }
    </script>
    <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
    <script src="2.js"></script>
  </body>
</html>
